<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <el-row :gutter="5">
        <el-col :span="8">
          <img
            :src="taskItem.iconUrl || 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png'"
            class="image"
          >
        </el-col>
        <el-col :span="16">
          <span style="font-size: 20px;">{{ taskItem.title }}</span>
          <el-button style="float: right; padding: 3px 0" type="text">{{ statusname[taskItem.status] }}</el-button>
        </el-col>
      </el-row>
    </div>
    <div style="padding-left: 10px;padding-top: 10px;">
      <div class="item">
        <span class="text">活动时间：</span>
        <span class="text">{{ taskItem.startTime?`${taskItem.startTime}至${ taskItem.endTime }`:'' }} </span>
      </div>
      <div class="item">
        <span class="text">参与人数：</span>
        <span class="text">{{ taskItem.joinInType == 2 ? taskItem.limitMans : '不限' }}</span>
      </div>
      <!--<div class="item">
        <span class="text">奖品情况：</span>
        <span class="text">无</span>
      </div>
      <div class="item">
        <span class="text">智能防刷：</span>
        <span class="text">未开启</span>
      </div>-->
    </div>
    <div class="bottom clearfix">
      <el-row>
        <el-col :span="6">
          <el-button type="text" @click="$emit('publish', taskItem.id)"> <i class="el-icon-s-promotion" style="font-size: 18px;">发布</i></el-button>
        </el-col>
        <el-col :span="6">
          <el-button type="text" @click="$emit('editTask', taskItem.id)"> <i class="el-icon-edit" style="font-size: 18px;">编辑</i></el-button>
        </el-col>
        <el-col :span="6">
          <el-button type="text" @click="$emit('preview', taskItem.id)"><i class="el-icon-view" style="font-size: 18px;">预览</i></el-button>
        </el-col>
        <el-col v-if="false" :span="6">
          <el-dropdown trigger="click" @command="$emit('handleCommand', $event)">
            <i class="el-icon-more" style="font-size: 18px;" />
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="userRecord">用户记录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
      </el-row>
    </div>
  </el-card>
</template>

<script>
export default {
  props: {
    taskItem: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      statusname: ['未发布', '未开始', '进行中', '已结束']
    }
  }
}
</script>
